/*
 * @Author: xiongpj
 * @Email: xiongpeiji@innjoy.me
 * @Date: 2020-09-28 15:28:46
 * @Last Modified by: xiongpj
 * @Last Modified time: 2020-09-29 17:01:08
 * @Description: '行李分拣-顶部列表组件'
 */
<template>
  <div class="dataOverview" v-if="dataList.length>0">
    <div
      class="data-item"
      v-for="(item, index) in dataList"
      :key="index"
      :style="{ backgroundColor: colorList[index] }"
    >
      <h3>{{ item.value }}</h3>
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "sortingTitle",
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      colorList:['#0060B7','#4586FF','#FF8324','#00C2CC','#55CC80','#FF5E74']
    };
  },
  watch: {
    dataList: {
      immediate: true,
      handler(val) {
        this.dataList = val;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.dataOverview {
  width: 100%;
  display: flex;
  align-items: center;
//   justify-content: space-between;
  margin-bottom: 20px;
  .data-item {
    width: 255px;
    height: 107px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h3 {
      font-size: 34px;
      font-weight: bold;
      line-height: 34px;
      margin-bottom: 10px;
    }
    p {
      font-size: 23px;
      line-height: 24px;
      color: rgba($color: #fff, $alpha: 0.7);
    }
  }
  .data-item + .data-item {
    margin-left: 20px;
  }
}
</style>